<template>
  <div class="equipment-management-container">
    <div class="left-container">
      <el-card class="box-card">
        <div slot="header" style="padding: 5px">
          <span class="tree-title">组织机构/装置</span>
        </div>
        <div class="tree-container">
          <el-tree
            :data="data"
            :props="defaultProps"
            default-expand-all
            @node-click="handleNodeClick"
            :render-content="renderContent"
          >
          </el-tree>
        </div>
      </el-card>
    </div>
    <div class="right-container">
      <el-form :model="queryForm" inline label-width="20px">
        <el-form-item>
          <el-input
            v-model="queryForm.equipmentTag"
            placeholder="请输入位号"
            size="small"
            style="width: 200px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="getList"
            >查询</el-button
          >
        </el-form-item>
      </el-form>

      <div style="margin-bottom: 20px">
        <el-button type="primary" size="small" @click="handleAdd">添加</el-button>
        <!-- <el-button type="primary" size="small">导入</el-button> -->
        <!-- <el-button type="danger" size="small">批量删除</el-button> -->
      </div>

      <el-table
        :data="tableData"
        border
        style="width: 100%"
        height="calc(100% - 200px)"
        :header-cell-style="{
          backgroundColor: '#fafafa',
          fontWeight: 'bold',
          color: '#252525',
        }"
        :row-style="{ height: '50px' }"
        :cell-style="{ padding: '8px 0' }"
      >
        <el-table-column label="序号" type="index" width="80">
          <template slot-scope="scope">
            <span> {{ (pageNum - 1) * pageSize + (scope.$index + 1) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="equipmentTag" label="位号" />
        <el-table-column prop="collectTagDesc" label="位号描述" />
        <el-table-column prop="rangeFilter" label="优先级/报警类型" width="140">
          <template slot-scope="scope">
            <span v-html="scope.row.alarmLevelName"></span>
          </template>
        </el-table-column>
        <el-table-column prop="alarmClass" label="报警分类" >
          <template slot-scope="scope">
            <span>{{ initAlarmClass(scope.row.alarmClass)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="unit" label="单位" />
        <el-table-column prop="highHighAlarm" label="高高报" />
        <el-table-column prop="highAlarm" label="高报" />
        <el-table-column prop="lowAlarm" label="低报" />
        <el-table-column prop="lowLowAlarm" label="低低报" />
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" style="color: #f56c6c" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin-top: 20px;text-align: right">
        <el-pagination
          :total="total"
          :page-size="pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
      <AlarmConfigurationSettingsDialog :dialogVisible.sync="dialogVisible" :title="title" @closeDialog="closeDialog" :editRow="editRow" />
    </div>
  </div>
</template>

<script>
import AlarmConfigurationSettingsDialog from "./alarmConfigurationSettings/dialog.vue";
import { getList, alarmConfigDelete , getDetail } from "@/api/alarmProcess/basicSettings/alarmConfigurationSettings";
export default {
  name: "EquipmentManagement",
  components: {
    AlarmConfigurationSettingsDialog,
  },
  data() {
    return {
      queryForm: {
        equipmentTag: null,
      },
      title: '',
      dialogVisible: false,
      editRow: null,
      total: 0,
      pageSize: 10,
      pageNum: 1,
      tableData: [],
      data: [
        {
          label: "中国 XXXXXXX 有限公司",
          level: 1,
          children: [
            {
              label: "安全环保部",
              level: 2,
              children: [
                { label: "库区", level: 3 },
                { label: "道路", level: 3 },
              ],
            },
            { label: "油气储运作业部",
             level: 2,
             children: [
              { label: "泵房", level: 3 },
              { label: "管道", level: 3 },
             ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      iconBase64:
        "",
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    initRangeFilter(val) {
      switch (val) {
        case 1:
          return '优先级';
        case 2:
          return '报警级别';
      }
    },
    initAlarmClass(val) {
      switch (val) {
        case 1:
          return '一级';
        case 2:
          return '二级';
        case 3:
          return '三级';
      }
    },
    getList() {
      getList({
        current: this.pageNum,
        size: this.pageSize,
        equipmentTag: this.queryForm.equipmentTag || null,
      }).then(({data:res}) => {
        console.log(res);
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
    closeDialog() {
      this.dialogVisible = false;
      this.getList();
    },
    handleAdd() {
      this.dialogVisible = true;
      this.title = '添加';
    },
    handleEdit(row) {
      getDetail({id: row.id}).then(({data:res}) => {
        this.dialogVisible = true;
        this.editRow = res.data;
        this.title = '编辑';
      });
    },
    handleDelete(row) {
      this.$confirm('确定删除该项吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        alarmConfigDelete({ids: row.id}).then(({data:res}) => {
          if (res.code === 200) {
            this.$message.success("删除成功");
            this.getList();
          }
        }).catch(() => {
          this.$message.error("删除失败");
        });
      }).catch(() => {
        this.$message.error("删除失败");
        });
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getList();
    },
    handleCurrentChange(current) {
      this.pageNum = current;
      this.getList();
    },
    handleNodeClick(data) {
      console.log(data);
    },
    renderContent(h, { data }) {
      // 只在前两层显示图标
      const showIcon = data.level <= 2;

      return h(
        "span",
        {
          class: "custom-tree-node",
        },
        [
          // 如果是前两层，显示图标
          showIcon
            ? h("img", {
                attrs: {
                  src: this.iconBase64,
                  alt: "icon",
                },
                class: "tree-node-icon",
              })
            : null,
          // 节点标签
          h(
            "span",
            {
              class: "tree-node-label",
            },
            data.label
          ),
        ]
      );
    },
  },
};
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}

.equipment-management-container {
  display: flex;
  height: 100%;
  width: 100%;
  padding: 10px;
}

.left-container {
  width: 400px;
  height: 100%;
  margin-right: 10px;
  border-radius: 5px;

  .tree-title {
    font-size: 16px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    color: #303133;
    margin-bottom: 0;
  }

  .tree-container {
    width: 100%;
    height: calc(100vh - 185px);
    overflow-y: auto;
  }

  :deep(.el-card__body) {
    padding: 5px;
  }

  // 自定义树节点样式
  :deep(.custom-tree-node) {
    display: flex;
    align-items: center;

    .tree-node-icon {
      width: 16px;
      height: 16px;
      margin-right: 8px;
      vertical-align: middle;
    }

    .tree-node-label {
      font-size: 14px;
      color: #606266;
    }
  }
}

.right-container {
  flex: 1;
  height: 100%;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #e6e6e6;
}
</style>
